<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@include file="../inc/header.jsp" %>
<title>产品中心
    <c:if test="${series0 ne null}">- ${series0.t0}</c:if>
    <c:if test="${series1 ne null}">- ${series1.t0}</c:if>
    - JDiy示例程序</title>
<script src="JDiy_bin/js/class/JSer.js" type="text/javascript"></script>
<script type="text/javascript">
    /**
     * 此函数用于设置地址栏参数，用到了JSer脚本框架，在设置参数的时候，现有地址栏参数会保持不变（不会丢失）。
     * 省去了生成链接的时候要一个一个地把参数以"参数1=值1&参数2=值2....&参数n=值n"的形式设置进去的麻烦。
     * */
    function choose(name, value) {
        var url = JSer.url();

        if (value != null) url.set(name, value);
        else url.del(name);

        if (name != 'page') url.del('page');
        url.go();
    }

    /**
     * 此函数处理可以多选的查询条件，多选的选项将以|分隔，存到地址栏中的name变量中，如：
     * 参数1=值1|值2|值N&参数2=值
     * */
    function mChoose(name, value) {
        var url = JSer.url(),
                values = url.get(name),
                valuesArr = values == null ? [] : values.split("|"),
                i = valuesArr.indexOf(value);
        if (i == -1) valuesArr.push(value);
        else valuesArr.splice(i, 1);

        if (valuesArr.length) url.set(name, valuesArr.join("|"));
        else url.del(name);
        url.go();
    }
</script>
</head>
<body>
<!-- 头部内容 开始 -->
<div class="max top">
    <div style="margin:8px;">
        <%@include file="../inc/top.jsp" %>
        <div>
            负责处理当前页面显示的Action方法为：<span class="action">jdiy.sample.product.list()</span>
        </div>
    </div>
</div>
<!-- 头部内容 结束 -->

<!--顶部导航菜单 开始 -->
<c:set var="thisNav" value="3"/><!--定个变量，以便在topNav包含文件中判断：当前栏目菜单显示不同的样式-->
<%@include file="../inc/topNav.jsp" %>
<!--顶部导航菜单 结束 -->


<!--中部主体区域 开始 -->
<div class="max cc">
    <table width="100%" cellpadding="0" cellspacing="0">
        <tr>

            <!-- 左侧导航菜单 开始 -->
            <%@include file="../inc/pro_leftNav.jsp" %>
            <!-- 左侧导航菜单 结束 -->


            <!-- 中间内容显示区 开始 -->
            <td class="bodyContent" valign="top">
                <div class="loc">您的位置：首页 - 产品中心
                    <c:if test="${series0 ne null}">- ${series0.t0}</c:if>
                    <c:if test="${series1 ne null}">- ${series1.t0}</c:if></div>
                <div style="margin:5px;border:2px #FFCCFF solid;background-color: #FFCCFF;">
                    <div>以下列出多种筛选条件选择（包括单选和多选的查询条件），
                        演示了如何在jsp页面实现多参数的综合查询及Action的实现方法。在实际应用中我们可能会采用Ajax技术
                        但由于本程序主要是为了方便大家对JDiy框架的学习，所以这儿并未使用AJAX，
                        不过本页借助了JSer框架的Url类，来实现网页的跳转，这样简化了分页链接的生成（不必向每个链接地址传递N多个查询参数）
                    </div>
                    <div class="pro_types"><strong>按品牌： </strong>
                        <a href="javascript:choose('brand_id',null);"
                           style="${param.brand_id eq null?'color:red;':''}">[不限]</a>
                        <c:forEach items="${brandLs.items}" var="item">
                            <a href="javascript:choose('brand_id','${item.id}');"
                               style="${param.brand_id eq item.id?'color:red;':''}">${item.name}</a>
                        </c:forEach>
                    </div>

                    <div class="pro_types"><strong>按屏幕大小：</strong>
                        <a href="javascript:choose('size_id',null);"
                           style="${param.size_id eq null?'color:red;':''}">[不限]</a>
                        <c:forEach items="${sizeLs.items}" var="item">
                            <a href="javascript:choose('size_id','${item.id}');"
                               style="${param.size_id eq item.id?'color:red;':''}">${item.name}</a>
                        </c:forEach>
                    </div>

                    <div class="pro_types"><strong>硬盘大小：</strong>
                        <a href="javascript:choose('disksize',null);"
                           style="${param.disksize eq null?'color:red;':''}">[不限]</a>
                        <c:forEach items="120G,250G,500G,1TB,2TB" var="item">
                            <a href="javascript:choose('disksize', '${item}');"
                               style="${param.disksize eq item?'color:red;':''}">${item}</a>
                        </c:forEach>
                    </div>

                    <div class="pro_types"><strong>内存大小(可多选)：</strong>
                        <c:forEach items="2G,4G,6G,8G" var="item">
                            <a href="javascript:mChoose('memsize', '${item}');"
                               style="${fn:contains(param.memsize, item)?'background-color:yellow;color:red':''}">${item}</a>
                        </c:forEach></div>

                    <div class="pro_types"><strong>外观特性(可多选)： </strong>
                        <c:forEach items="轻薄,稳重,个性,时尚" var="item">
                            <a href="javascript:mChoose('exterior', '${item}');"
                               style="${fn:contains(param.exterior, item)?'background-color:yellow;color:red':''}">${item}</a>
                        </c:forEach></div>
                </div>


                <div style="padding:15px;">
                    <table style="width:100%">
                        <tr>
                            <c:forEach items="${productLs.items}" var="i" varStatus="vs">
                            <td align="center">
                                <a href="product/show.jd?id0=${param.id0}&id1=${param.id1}&productId=${i.id}"
                                   target="_self">
                                    <img src="${i.file.picmin[0]}" style="width: 150px; height:105px;" border="0"></a>

                                <div>
                                    <a href="product/show.jd?id0=${param.id0}&id1=${param.id1}&productId=${i.id}">${i.name}</a>
                                </div>
                            </td>
                            <c:if test="${(vs.index+1)%4 eq 0}"></tr>
                        <tr></c:if> <!--每４个转下行.-->
                            </c:forEach>
                        </tr>
                    </table>

                </div>

                <!--分页链接 开始-->
                <!--注意：分页样式您可以根据自己的需要调整，以下只是一个简单的示例演示-->
                <div class="pager">
                    共${productLs.pageCount}页/${productLs.rowCount}条记录
                    当前第${productLs.absPage}页.
                    &nbsp;&nbsp;&nbsp;
                    <c:if test="${productLs.absPage gt 1}">
                        <a href="javascript:choose('page',1);">[首页]</a>
                        <a href="javascript:choose('page', ${productLs.absPage-1});">[上一页]</a>
                    </c:if>
                    <c:if test="${productLs.absPage le 1}">
                        [首页]
                        [上一页]
                    </c:if>
                    <c:forEach begin="1" end="${productLs.pageCount}" var="i">
                        <a href="javascript:choose('page', ${i});">[${i}]</a>
                    </c:forEach>
                    <c:if test="${productLs.absPage lt productLs.pageCount}">
                        <a href="javascript:choose('page', ${productLs.absPage+1});">[下一页]</a>
                        <a href="javascript:choose('page', ${productLs.pageCount});">[尾页]</a>
                    </c:if>
                    <c:if test="${productLs.absPage ge productLs.pageCount}">
                        [下一页]
                        [尾页]
                    </c:if>
                </div>
                <!--分页链接 结束-->

            </td>
            <!-- 中间内容显示区 结束 -->

        </tr>
    </table>
</div>
<!--中部主体区域 结束 -->


<!--页脚 开始 -->
<%@include file="../inc/footer.jsp" %>
<!--页脚 结束 -->
</body>
</html>